import React, { Component } from 'react'

import {
  StyleSheet,
  View,
  Text,
  Picker,
  Image,
  TouchableOpacity
} from 'react-native'

import { connect } from 'react-redux'
import HeaderDefault from '../../components/header/HeaderDefault'
import EveFatherDetail from './EveFatherDetail'
import Modal from '../../components/ModalBox'

class EveUsuallyDetail extends Component {
  constructor(props) {
    super(props)

    this.state = {
      currentModalStatus: 'sjycd',
      sjycd: '小学及小学以下',
      kqycqk: '正常',
      sfhj: '否',
      sfcy: '否',
      zcqk: '每天吃',
      sfhyyxjb: '其他'
    }
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        rightRitle="提交"
        rihghtBtnOnPress={() => {
          navigation.state.params.clickRightMethod()
        }}
        backBtnOnPress={navigation.goBack}
        title="一般情况"
      />
    )
  })

  componentDidMount() {
    this.props.navigation.setParams({ clickRightMethod: this._ritBtn })
  }

  _ritBtn = () => {}

  _rederSection(sectionTitle, sectionValue, pressF) {
    return (
      <View style={styles.sectionS}>
        <View style={styles.sectionLeft}>
          <Text>{sectionTitle}</Text>
        </View>
        <TouchableOpacity onPress={pressF} style={styles.sectionRight}>
          <Text>{sectionValue}</Text>
        </TouchableOpacity>
      </View>
    )
  }

  _getModalDataSource(Currentstatus) {
    switch (Currentstatus) {
      case 'sjycd':
        return ['小学及小学以下', '初中', '高中', '大专或本科及以上']

      case 'kqycqk':
        return ['全口缺齿', '半口缺齿', '义齿', '正常']
      case 'sfhj':
        return ['是', '否']
      case 'sfcy':
        return ['是', '否']
      case 'zcqk':
        return ['每天吃', '部分吃']
      case 'sfhyyxjb':
        return [
          '高血压',
          '糖尿病',
          '脑血管疾病',
          '冠心病',
          '慢性呼吸系统疾病',
          '消化系统疾病',
          '类风湿性关节炎',
          '其他'
        ]

      default:
        break
    }
  }

  _modalSetValue = value => {
    switch (this.state.currentModalStatus) {
      case 'sjycd':
        this.setState({ sjycd: value })
        break
      case 'kqycqk':
        this.setState({ kqycqk: value })
        break
      case 'sfhj':
        this.setState({ sfhj: value })
        break
      case 'sfcy':
        this.setState({ sfcy: value })
        break
      case 'zcqk':
        this.setState({ zcqk: value })
        break
      case 'sfhyyxjb':
        this.setState({ sfhyyxjb: value })
        break
      default:
        break
    }
  }

  _getModaldefaultVaule(Currentstatus) {
    switch (Currentstatus) {
      case 'sjycd':
        return this.state.sjycd
      case 'kqycqk':
        return this.state.kqycqk
      case 'sfhj':
        return this.state.sfhj
      case 'sfcy':
        return this.state.sfcy
      case 'zcqk':
        return this.state.zcqk
      case 'sfhyyxjb':
        return this.state.sfhyyxjb
      default:
        return ''
        break
    }
  }

  _renderModalBox = () => {
    let dataSoure = this._getModalDataSource(this.state.currentModalStatus)

    let set_vale = this._getModaldefaultVaule(this.state.currentModalStatus)
    return (
      <Modal
        style={styles.modal3}
        position={'bottom'}
        backdropPressToClose={false}
        swipeToClose={false}
        ref={md => (this.myModel = md)}
      >
        <View style={{ flex: 1 }}>
          <View
            style={{
              width: screenWidth,
              height: 50,
              flexDirection: 'row-reverse',
              alignItems: 'center'
            }}
          >
            <TouchableOpacity
              onPress={() => {
                this.myModel.close()
              }}
              style={{
                width: 50,
                height: 50,
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <Image
                style={{ width: 30, height: 30 }}
                source={require('./src/guanbi.png')}
              />
            </TouchableOpacity>
          </View>

          <Picker
            selectedValue={set_vale}
            style={{
              height: 50,
              width: screenWidth
            }}
            onValueChange={this._modalSetValue}
          >
            {dataSoure.map((value, index) => {
              return (
                <Picker.Item key={value + index} label={value} value={value} />
              )
            })}
          </Picker>
          <View style={{ width: screenWidth, height: 30 }} />
        </View>
      </Modal>
    )
  }

  _pressSection = keyStr => {
    this.setState({
      currentModalStatus: keyStr
    })

    this.myModel.open()
  }

  render() {
    return (
      <EveFatherDetail pInfo={this.props.navigation.state.params.pinfo}>
        <View style={{ flex: 1 }}>
          {this._rederSection('受教育程度', this.state.sjycd, () => {
            this._pressSection('sjycd')
          })}

          {this._rederSection('口腔牙齿情况', this.state.kqycqk, () => {
            this._pressSection('kqycqk')
          })}

          {this._rederSection('是否喝酒', this.state.sfhj, () => {
            this._pressSection('sfhj')
          })}

          {this._rederSection('是否抽烟', this.state.sfcy, () => {
            this._pressSection('sfcy')
          })}

          {this._rederSection('早餐情况', this.state.zcqk, () => {
            this._pressSection('zcqk')
          })}

          {this._rederSection('是否患有以下疾病', this.state.sfhyyxjb, () => {
            this._pressSection('sfhyyxjb')
          })}
          {this._renderModalBox()}
        </View>
      </EveFatherDetail>
    )
  }
}
const styles = StyleSheet.create({
  sectionS: {
    width: screenWidth,
    height: 50,
    flexDirection: 'row',
    borderBottomColor: '#efefef',
    borderBottomWidth: 1,
    backgroundColor: 'white'
  },
  sectionLeft: {
    width: 0.4 * screenWidth,
    height: 50,
    justifyContent: 'center',
    paddingLeft: 10,
    borderRightColor: '#efefef',
    borderRightWidth: 1
  },
  modal3: {
    height: 250,
    width: screenWidth
    // justifyContent: 'center',
    // alignItems: 'center'
  },
  sectionRight: {
    width: 0.6 * screenWidth,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

function select(store) {
  return { user_info: store.userInfo.user_info }
}

export default connect(select)(EveUsuallyDetail)
